<template>
  <div class="nav">
    <Breadcrumb>
      <BreadcrumbItem>药斗</BreadcrumbItem>
      <BreadcrumbItem>配置</BreadcrumbItem>
      <BreadcrumbItem>列表</BreadcrumbItem>
    </Breadcrumb>
  </div>

  <Tabs value="name1" :animated="false" style="padding: 10px">
    <TabPane label="斗柜" name="dg">
      <div class="dg">
        <vxe-grid v-bind="gridOptions1">
          <template #toolbar_buttons>
            <vxe-button
              style="background-color: #945635; color: aliceblue; width: 110px"
              >+  新增斗柜</vxe-button
            >
            <vxe-button
              style="
                width: 88px;
                border: none;
                background-color: #f59f71;
                color: #ffffff;
              "
              >批量删除</vxe-button
            >
          </template>
        </vxe-grid>
      </div>
    </TabPane>
    <TabPane label="药斗" name="yd">
      <div class="yd">
        <vxe-grid v-bind="gridOptions2">
          <template #toolbar_buttons>
            <vxe-button
              style="background-color: #945635; color: aliceblue; width: 110px"
              >+  配置药斗</vxe-button
            >
            <vxe-button
              style="
                width: 88px;
                border: none;
                background-color: #f59f71;
                color: #ffffff;
              "
              >批量删除</vxe-button
            >
          </template>
        </vxe-grid>
      </div>
    </TabPane>
    <TabPane label="药品" name="yp">
      <div class="yp">
        <vxe-grid v-bind="gridOptions3">
          <template #toolbar_buttons>
           
            <Select
              v-model="model"
              style="width: 260px;"
              placeholder="请选择库房"
            >
              <Option
                v-for="item in stateList"
                :value="item.value"
                :key="item.value"
                >{{ item.label }}</Option
              >
            </Select>
           
          </template>
        </vxe-grid>
      </div>
    </TabPane>
  </Tabs>
</template>

<script setup>
import { ref, reactive } from "vue";
const gridOptions1 = reactive({
  border: true,
  keepSource: true,
  showOverflow: true,
 
  id: "toolbar_demo_2",
  loading: false,
  columnConfig: {
    resizable: true,
  },
  customConfig: {
    storage: true,
  },
  editConfig: {
    trigger: "click",
    mode: "row",
    showStatus: true,
  },
  toolbarConfig: {
    zoom: true,
    custom: true,
    slots: {
      buttons: "toolbar_buttons",
    },
  },
  columns: [
    { type: "checkbox", width: 70, align: "center" },
    { field: "id", title: "序号", width: 70, align: "center" },
    { field: "name", title: "斗柜名称", width: 184 },
    { field: "prescription", title: "斗柜位置", width: 180 },
    { field: "diagnosis", title: "药斗布局", align: "center" },
    { field: "Department", title: "格子数", width: 100, align: "center" },
    { field: "state", title: "斗柜描述", width: 120, align: "center" },
    { field: "operate", title: "操作", width: 150, align: "center" },
  ],
  data: [
    {
      id: 1,
      name: "陈文婷",
      prescription: "321",
      diagnosis: "肺炎：肺部感染，通常由",
      Department: "--",
      state: 28,
      Interventions: "Shenzhen",
      date: "2023-12-07 15:54:12",
      operate: "查看",
    },
    {
      id: 2,
      name: "吕致盈",
      prescription: "322",
      diagnosis: "胃溃疡：胃黏膜下层或",
      Department: "--",
      state: 22,
      Interventions: "Guangzhou",
      date: "2023-12-07 15:54:12",
      operate: "查看",
    },
    {
      id: 3,
      name: "陈文婷",
      prescription: "325",
      diagnosis: "高血压：血压持续升高",
      Department: "--",
      state: 32,
      Interventions: "Shanghai",
      date: "2023-12-07 15:54:12",
      operate: "查看",
    },
    {
      id: 4,
      name: "陈文婷",
      prescription: "327",
      diagnosis: "1",
      Department: "中药部门",
      state: 23,
      Interventions: "Shenzhen",
      date: "2023-12-07 15:54:12",
      operate: "查看",
    },
  ],
});

const gridOptions2 = reactive({
  border: true,
  keepSource: true,
  showOverflow: true,

  id: "toolbar_demo_2",
  loading: false,
  columnConfig: {
    resizable: true,
  },
  customConfig: {
    storage: true,
  },
  editConfig: {
    trigger: "click",
    mode: "row",
    showStatus: true,
  },
  toolbarConfig: {
    zoom: true,
    custom: true,
    slots: {
      buttons: "toolbar_buttons",
    },
  },
  columns: [
    { field: "id", title: "序号", align: "center" },
    { field: "name", title: "入库标题" },
    { field: "prescription", title: "入库时间" },
    { field: "diagnosis", title: "入库人" },
    { field: "Department", title: "状态", width: 100, align: "center" },
    { field: "state", title: "操作", width: 120, align: "center" },
  ],
  data: [
    {
      id: 1,
      name: "陈文婷",
      prescription: "321",
      diagnosis: "肺炎：肺部感染，通常由",
      Department: "--",
      state: 28,
      Interventions: "Shenzhen",
      date: "2023-12-07 15:54:12",
      operate: "查看",
    },
    {
      id: 2,
      name: "吕致盈",
      prescription: "322",
      diagnosis: "胃溃疡：胃黏膜下层或",
      Department: "--",
      state: 22,
      Interventions: "Guangzhou",
      date: "2023-12-07 15:54:12",
      operate: "查看",
    },
    {
      id: 3,
      name: "陈文婷",
      prescription: "325",
      diagnosis: "高血压：血压持续升高",
      Department: "--",
      state: 32,
      Interventions: "Shanghai",
      date: "2023-12-07 15:54:12",
      operate: "查看",
    },
    {
      id: 4,
      name: "陈文婷",
      prescription: "327",
      diagnosis: "1",
      Department: "中药部门",
      state: 23,
      Interventions: "Shenzhen",
      date: "2023-12-07 15:54:12",
      operate: "查看",
    },
  ],
});

const gridOptions3 = reactive({
  border: true,
  keepSource: true,
  showOverflow: true,

  id: "toolbar_demo_2",
  loading: false,
  columnConfig: {
    resizable: true,
  },
  customConfig: {
    storage: true,
  },
  editConfig: {
    trigger: "click",
    mode: "row",
    showStatus: true,
  },
  toolbarConfig: {
    zoom: true,
    custom: true,
    slots: {
      buttons: "toolbar_buttons",
    },
  },
  columns: [
    { field: "id", title: "序号", align: "center" },
    { field: "name", title: "药品名称" },
    { field: "prescription", title: "存放位置" , align: "center"},
    { field: "diagnosis", title: "操作", align: "center" },
   
  ],
  data: [
    {
      id: 1,
      name: "陈文婷",
      prescription: "321",
      diagnosis: "肺炎：肺部感染，通常由",
      Department: "--",
      state: 28,
      Interventions: "Shenzhen",
      date: "2023-12-07 15:54:12",
      operate: "查看",
    },
    {
      id: 2,
      name: "吕致盈",
      prescription: "322",
      diagnosis: "胃溃疡：胃黏膜下层或",
      Department: "--",
      state: 22,
      Interventions: "Guangzhou",
      date: "2023-12-07 15:54:12",
      operate: "查看",
    },
    {
      id: 3,
      name: "陈文婷",
      prescription: "325",
      diagnosis: "高血压：血压持续升高",
      Department: "--",
      state: 32,
      Interventions: "Shanghai",
      date: "2023-12-07 15:54:12",
      operate: "查看",
    },
    {
      id: 4,
      name: "陈文婷",
      prescription: "327",
      diagnosis: "1",
      Department: "中药部门",
      state: 23,
      Interventions: "Shenzhen",
      date: "2023-12-07 15:54:12",
      operate: "查看",
    },
  ],
});
</script>

<style scoped>
.nav {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
  font-size: 20px;
}
.dg {
  border-right: 20px solid #ffffff;
  border-left: 20px solid #ffffff;
}

.yd {
  border-right: 20px solid #ffffff;
  border-left: 20px solid #ffffff;
}
.yp {
  border-right: 20px solid #ffffff;
  border-left: 20px solid #ffffff;
}
</style>